<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  id: props.id,
  color: '',
  icon: '',
  img: '',
  name: '',
  expUp: 0,
  expOrder: 0,
})
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      const url = props.id !== '' ? '/server-user/admin/user/level/update' : '/server-user/admin/user/level/save'
      post(
        { url, data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          if (code == 200) {
            emit('update:show', false)
            emit('confirm')
          }
          done(code == 200)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-user/admin/user/level/info', data: { id: props.id } }, ({ data }) => {
    Object.assign(detail, data)
  })
}
onMounted(() => {
  if (props.id !== '') getInfo()
})
const options = ref<any[]>([])
for (let i = 0; i < 100; i++) {
  options.value.push({
    label: '等级' + i,
    value: i,
  })
}
</script>
<template>
  <CDrawer v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="500px" :title="props.id ? '编辑' : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 7 }" :wrapper-col-props="{ span: 17 }">
        <a-form-item label="等级名称" field="name" :rules="[{ required: true, message: '请输入等级名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.name" placeholder="请输入等级名称" />
        </a-form-item>
        <a-form-item label="等级级别" v-if="props.id === ''" field="id" :rules="[{ required: true, message: '请选择' }]" :validate-trigger="['change', 'blur']">
          <a-select v-model="detail.id" :options="options" placeholder="请选择" />
        </a-form-item>
        <!-- <a-form-item label="文字颜色" field="id" :rules="[{ required: true, message: '请选择' }]" :validate-trigger="['change', 'blur']">
          <a-color-picker defaultValue="#333" v-model="detail.color" showText disabledAlpha />
        </a-form-item> -->
        <!-- <a-form-item label="等级图标" field="icon" :rules="[{ required: true, message: '请上传图标' }]" :validate-trigger="['change', 'blur']">
          <Upload :list="detail.icon" v-model:value="detail.icon" />
        </a-form-item> -->
        <a-form-item label="背景图" field="img" extra="700:342" :rules="[{ required: true, message: '请上传背景图' }]" :validate-trigger="['change', 'blur']">
          <Upload :list="detail.img" v-model:value="detail.img" />
        </a-form-item>
        <a-form-item label="升级所需经验值" field="expUp" :rules="[{ required: true, message: '升级所需经验值' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.expUp" placeholder="请输入升级所需经验值" />
        </a-form-item>
        <a-form-item label="下单获得经验值" field="expOrder" extra="每消费1元获得多少经验值" :rules="[{ required: true, message: '下单获得经验值' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.expOrder" placeholder="请输入下单获得经验值" />
        </a-form-item>
      </a-form>
    </div>
  </CDrawer>
</template>
<style lang="less" scoped></style>
